<template>
	<div class="big-container" style="padding: 20px 0;">
		<div class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item
						:to="{path:'/agencySet',query:{id:'1817830386937192448'}}">{{routeName}}</el-breadcrumb-item>
					<el-breadcrumb-item
						v-if="currentObj.dictLabel!=routeName">{{currentObj.dictLabel}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<el-row :gutter="30">
					<el-col :span="5">
						<div class="left-content">
							<div @click="changeMenu(item)" v-for="(item,index) in menuList" :key="index"
								:class="currentObj.dictCode==item.dictCode?'tabItem-active':'tabItem-empty'"
								class="tabItem-item one_line">
								{{item.dictLabel}}
							</div>
						</div>
					</el-col>
					<el-col :span="19">
						<div class="right-content">
							<div class="inner-title start-layout">
								<div class="inner-name">{{currentObj.dictLabel}}
									<div class="inner-line"></div>
								</div>
							</div>
							<el-empty v-if="dataList.length==0" :image-size="200"></el-empty>
							<div class="dept-area" v-if="currentObj.dictCode == '1817835094997295104'">
								<div style="flex-wrap: wrap;display: flex;align-items: flex-start;justify-content: flex-start;"
									v-if="!showDept">
									<div @click="getDept(item)" v-for="(item,index) in dataList" :key="index"
										class="dept-item">{{item.title}}
									</div>
								</div>
								<div v-if="showDept">
									<div class="dept-title">{{currentDept.title}}</div>
									<div class="dept-desc">{{currentDept.deptNote}}</div>
								</div>
							</div>
							<div v-else>
								<div style="min-height: 420px;">									
									<div @click="toDetail(item)" v-for="(item,index) in dataList" :key="index"
										class="between-layout intro-item">
										<div style="flex: 1;width: 0;" class="start-layout">
											<div class="intro-dot"></div>
											<div class="intro-name one_line">{{item.title||item.name}}<span v-if="item.position">（{{item.position}}）</span></div>
										</div>
										<div class="intro-date">{{ parseTime(item.releaseTime, '{y}-{m}-{d}') }}</div>
									</div>
								</div>
								<div v-if="total>0" style="margin-top: 50px;" class="end-layout">
									<el-pagination class="msg-pagination-container" background
										@current-change="handleCurrentChange" :current-page.sync="qureyForm.pageNum"
										:page-size="10" layout="prev, pager, next, jumper" :total="total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getMultiDict,
		getFrontList,
		getMemberList,
		getDept
	} from "@/api/index";
	export default {
		data() {
			return {
				menuList: [],
				dataList: [],
				routeName: '机构设置',
				currentObj: {
					dictCode: '1817830386937192448',
					dictLabel: '机构设置'
				},
				qureyForm: {
					pageSize: 10,
					pageNum: 1,
					tenantId: process.env.VUE_APP_TENANTID
				},
				total: 0,
				currentDept: {
					title: '政治部',
					deptNote: '负责党组秘书工作，协同市委主管部门和县（市）、区党委做好全市检察机关党的建设和队伍建设工作；开展具有检察特点的思想政治工作，承担全市检察机关的表先奖励工作；组织实施上级人民检察院制定的检察机关有关干部管理规定；协同地方党委对县（市）、区检察院领导班子考核、配备及后备干部的考察工作，办理有关任免手续；负责机构编制及人事、劳资工作；指导县（市）、区检察院的思想政治工作。'
				},
				showDept: false
			}
		},
		created() {
			getMultiDict({
				tenantId: process.env.VUE_APP_TENANTID,
				parentCode: this.$route.query.id
			}).then(res => {
				this.menuList = res.data
			})
			if (this.$route.query.twoId) {
				this.currentObj = {
					dictCode: this.$route.query.twoId,
					dictLabel: this.$route.query.name
				}
				this.getList()
			} else {
				this.getList()
			}
		},
		mounted() {
			window.scrollTo(0, 0);
		},
		methods: {
			getDept(item) {
				if (item.children && item.children.length > 0) {
					this.showDept = false
					this.dataList = item.children
				} else {
					this.showDept = true
					this.currentDept = item
				}
			},
			getList() {
				if (this.currentObj.dictCode == '1817830386937192448' || this.currentObj.dictCode ==
					'1817830470227681280') {
					getFrontList(this.qureyForm, {
						typeAncestors: this.currentObj.dictCode
					}).then(res => {
						this.dataList = res.rows
						this.total = res.total
					})
				} else if (this.currentObj.dictCode == '1817835094997295104') {
					getDept(process.env.VUE_APP_TENANTID).then(res => {
						this.showDept = false
						this.dataList = res.data
					})
				} else {
					getMemberList(this.qureyForm, {
						typeAncestors: this.currentObj.dictCode
					}).then(res => {
						this.dataList = res.rows
						this.total = res.total
					})
				}
			},
			changeMenu(item) {
				this.currentObj = item
				this.qureyForm.pageNum = 1
				this.getList()
			},
			handleCurrentChange(val) {
				this.qureyForm.pageNum = val
				this.getList()
			},
			//跳转详情
			toDetail(item) {
				this.$router.push({
					name: 'commonDetail',
					query: {
						id: item.baseId,
						name: this.routeName,
						twoName: this.currentObj.dictLabel,
						routePath: '/agencySet',
						routeId: '1817830386937192448',
						type: item.name ? 2 : ''
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .el-icon-location {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 22px !important;
		margin-right: 6px;
	}

	::v-deep .el-icon-arrow-right {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	/* 不被选中时的颜色 */
	.el-breadcrumb ::v-deep .el-breadcrumb__inner {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	.dept-area {
		.dept-item {
			width: 32%;
			color: #1d1c1c;
			line-height: 50px;
			margin-left: 1%;
			display: block;
			font-size: 18px;
			cursor: pointer;
		}

		.dept-item:hover {
			color: #174D8F;
		}

		.dept-title {
			font-size: 20px;
			color: #000;
			font-weight: 600;
			text-align: center;
			margin: 30px 0;
		}

		.dept-desc {
			text-indent: 2em;
			color: #000;
			line-height: 33px;
			font-size: 20px;
		}
	}
</style>